import React from 'react'
import { BrowserRouter, Navigate, NavLink, Link, Outlet, useRoutes } from 'react-router-dom'
const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
}
const inlineFlexStyle = {
  display: 'flex',
  justifyContent: 'flex-start',
  padding: '2px',
  gap: '6px'
}

// 同一个组件可以绑定多个路径
const routeList = [
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "about",
        element: <About />,
      },
      {
        path: "inbox",
        element: <Inbox />,
      },
    ]
  },
]

export function RouterApp2() {
  return (
    <BrowserRouter>
      <RouterApp></RouterApp>
    </BrowserRouter>
  )
}

// 在使用本useReacts的函数组件中不能出现<BrowserRouter>组件,需要外部包裹
// 使用useRoutes(routeData)创建routes
export function RouterApp() {
  const routes = useRoutes(routeList)
  return (
    <div style={{ ...boxStyle, 'minWidth': '460px' }}>
      <nav>
        <section>
          <p>React Router Example</p>
        </section>
      </nav>
      {routes}
    </div>
  )
}

// 使用Outlet作为占位符,匹配对应路由结构
function App(props) {
  return (
    <div>
      <div>
        <p>使用link组件导航</p>
        <ul style={inlineFlexStyle}>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
      </div>
      <hr />
      <div>
        <p>使用link组件导航</p>
        <ul style={inlineFlexStyle}>
          <li><NavLink to="/about" className={({ isActive, isPending, isTransitioning }) =>
            [
              isPending ? "pending" : "",
              isActive ? "active" : "",
              isTransitioning ? "transitioning" : "",
            ].join(" ")
          }>About</NavLink></li>
          <li><NavLink to="/inbox" className={({ isActive, isPending, isTransitioning }) =>
            [
              isPending ? "pending" : "",
              isActive ? "active" : "",
              isTransitioning ? "transitioning" : "",
            ].join(" ")
          }>Inbox</NavLink></li>
        </ul>
      </div>
      <Outlet />
    </div>
  )
}

function About() {
  return (
    <div style={boxStyle}>
      <h3>这是About组件啊</h3>
    </div>
  )
}

function Inbox(props) {
  return (
    <div style={boxStyle}>
      <h2>这是Inbox组件啊</h2>
      {props.children || "Welcome to your Inbox"}
    </div>
  )
}

function Message(props) {
  return (
    <div style={boxStyle}>
      <h3>Message {props.params.id}</h3>
    </div>
  )
}